<!-- 顺序练题 -->
<template>
	<view>
		<!-- 顶部 -->
		<view class="top">
			<view class="back" @click="$win.back()">
				<view>
					<image src="/static/iconfont/arrow-left-bold.png" mode="aspectFill"></image>
				</view>
				<text>{{type}}</text>
			</view>
		</view>
		<!-- 倒计时 -->
		<view class="countdown" v-if="(type==='模拟考试')?true:false">
			<view>
				<image src="/static/images/icon/study/shunxu/daojishi.png" mode="aspectFill"></image>
				<text>倒计时：{{fix2(countdownTime.m)+':'+fix2(countdownTime.s)}}</text>
			</view>
		</view>

		<!-- 导航栏 -->
		<view class="nav" v-else>
			<view class="left"
				:style="{'color':nav.left.isAct?'#fff':'#333','background':nav.left.isAct?'#29c563':'#ffffff'}"
				@click="nav.left.isAct=true;nav.right.isAct=false">
				答题模式
			</view>
			<view class="right"
				:style="{'color':nav.right.isAct?'#fff':'#333','background':nav.right.isAct?'#29c563':'#ffffff'}"
				@click="nav.right.isAct=true;nav.left.isAct=false">
				背题模式
			</view>
		</view>
		<!-- 主体 -->
		<view class="body">
			<view class="question w">
				<text>{{questionMsg.question}}</text>
				<view class="tixing">
					<image src="/static/images/icon/study/shunxu/tixing.png" mode="aspectFill"></image>
					<text>{{questionMsg.type}}</text>
				</view>
			</view>
			<image src="" mode="aspectFit" class="pic w" v-show="questionMsg.pic==''?true:false"></image>

			<view class="answer w">
				<view class="son" v-for="(k,i) in questionMsg.answer">
					<image src="/static/images/icon/study/shunxu/weixuan.png" mode="aspectFill"></image>
					<text>{{backAnswerCode(i) +'、' +k.text}}</text>
				</view>
			</view>
			<view class="correct w">
				<text>正确答案： <text style="color: #333333;">D</text> </text>
				<button class="subBtn">提交答案</button>
			</view>

			<view class="explain w">
				<view class="title">
					<view></view>
					<text>官方解释</text>
				</view>
				<text class="content">{{questionMsg.explain}}</text>
			</view>

		</view>
		<!-- 题目列表 -->
		<view class="tiList" v-show="isShowList">
			<view class="mask" @click="isShowList=false"></view>
			<view class="content">
				<view class="son" v-for="(k,i) in 100">
					{{fix2(i+1)}}
				</view>
			</view>
		</view>
		<!-- 成绩 -->
		<view class="score" v-if="isSub"><!-- 用v-show进度条会消失... -->
			<view class="mask"></view>
			<view class="content">
				<view class="title">
					<view></view>
					<text>考试成绩</text>
					<view></view>
				</view>
				<view class="progressBar">
					<qiun-data-charts type="arcbar" :opts="opts" :chartData="chartData" />
					<view class="text">
						<text>剩余未做</text>
						<text>4题</text>
					</view>
				</view>
				<text class="isPass">考试合格</text>
				<view class="fenshu">
					当前考试成绩：<text>96分</text>
				</view>
				<view class="btns">
					<button class="continue" @click="isSub=false">继续考试</button>
					<button class="sub" @click="$win.show('score/score')">现在交卷</button>
				</view>
			</view>
		</view>

		<!-- 底部 -->
		<view class="bottom">
			<view class="son" style="width: 100rpx;">
				<image src="/static/images/icon/study/shunxu/true.png" mode="aspectFill"></image>
				<text>100</text>
			</view>
			<view class="son" style="width: 100rpx;margin-left: 50rpx;">
				<image src="/static/images/icon/study/shunxu/false.png" mode="aspectFill"></image>
				<text>100</text>
			</view>
			<view class="son" style="width: 180rpx;margin-left: 50rpx;" @click="isShowList=true">
				<image src="/static/images/icon/study/shunxu/tishu.png" mode="aspectFill"></image>
				<text>100/100</text>
			</view>
			<view class="son" @click="isShoucang=!isShoucang" style="width: 150rpx;margin-left: 100rpx;"
				v-if="(type==='顺序练题')?true:false">
				<image :src="isShoucang?shoucangPic[1]:shoucangPic[0]" mode="aspectFill"></image>
				<text :style="{'color':isShoucang?'#FC6624':''}">{{isShoucang?'已收藏':'收藏'}}</text>
			</view>
			<button v-else class="jiaojuan" @click="isSub=true">交卷</button>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: '',
				isShowList: false,
				//倒计时
				countdownTime: {
					m: 45,
					s: 0,
				},
				//是否已经回答
				isAnswer: false,
				//是否收藏
				isShoucang: false,
				//是否交卷
				isSub: false,
				// 进度条
				chartData: {
					series: [{
						name: "完成度",
						color: "#2fc25b",
						data: 0.96
					}]
				},
				opts: {
					extra: {
						arcbar: {
							type: "circle",
							width: null,
							lineCap: "round"
						}
					}
				},
				shoucangPic: ['/static/images/icon/study/shunxu/shoucang.png',
					'/static/images/icon/study/shunxu/shoucanged.png'
				],
				nav: {
					left: {
						text: '答题模式',
						isAct: true
					},
					right: {
						text: '背题模式',
						isAct: false
					}
				},
				questionMsg: {
					pic: '',
					type: '单选',
					question: '选未取得驾驶证的学员在道路上学习驾驶技能,下列哪种做法是正确',
					answer: [{
							isCorrect: false, //是否答对
							text: '使用所学车型的教练车单独驾驶学习',
						},
						{
							isCorrect: false, //是否答对
							text: '使由所学车型的教练车由教练员指导由',
						},
						{
							isCorrect: false, //是否答对
							text: '使用私家车由教练员随车指导',
						},
						{
							isCorrect: false, //是否答对
							text: '右前方路口视野受阻如有突然冲出车辆容易引发事故',
						},
					],
					correct: '右前方路口视野受阻如有突然冲出车辆容易引发事故', //正确答案
					explain: '右前方路口视野受阻如有突然冲出车辆容易引发事故',
				}
			}
		},
		methods: {
			//判断正确答案
			answerJudge(item) {
				if (item != this.questionMsg.correct) {

				}
			},
			//返回答案号码
			backAnswerCode(i) {
				switch (i) {
					case 0:
						return 'A'
					case 1:
						return 'B'
					case 2:
						return 'C'
					case 3:
						return 'D'
				}

			},
			//显示两位数
			fix2(n) {
				if (n < 10)
					n = '0' + n
				return n
			},
			toPX() {
				//根据用户设备屏幕大小设置宽度
				this.px = uni.getWindowInfo().screenWidth / 750
				console.log('lwlsb', this.px)
				//给进度条宽度赋值
				this.opts.extra.arcbar.width = 13 * this.px
			},
			//考试倒计时
			countdown() {
				var t = setInterval(() => {
					if (this.countdownTime.s == 0) {
						this.countdownTime.s = 59
						this.countdownTime.m--
					} else {
						this.countdownTime.s--
					}
					if (this.countdownTime.m == 0 && this.countdownTime.s == 0) {
						clearInterval(t)
						return 0
					}
				}, 1000)
			},
		},
		onLoad(option) {
			this.type = option.type
			if (this.type === '模拟考试') {
				this.countdown()
				this.toPX()
			}
			
		}
	}
</script>

<style lang="scss">
	.top {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 40rpx;
		width: 750rpx;
		height: 88rpx;
		background: #ffffff;

		.back {
			display: flex;
			flex-direction: row;
			align-items: center;

			view {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 88rpx;
				height: 88rpx;

				image {
					width: 20rpx;
					height: 34rpx;
				}
			}

			text {
				height: 34rpx;
				line-height: 34rpx;
				font-size: 34rpx;
				font-family: Source Han Sans CN, Source Han Sans CN-Regular;
				font-weight: 400;
				text-align: left;
				color: #333333;
			}
		}
	}

	.countdown {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 750rpx;
		height: 80rpx;
		background: #ffffff;

		view {
			display: flex;
			align-items: center;

			image {
				width: 28rpx;
				height: 28rpx;
				margin-right: 12rpx;
			}

			text {
				font-size: 24rpx;
				line-height: 28rpx;
				font-family: Source Han Sans CN, Source Han Sans CN-Regular;
				font-weight: 400;
				text-align: left;
				color: #999999;
			}
		}
	}

	.nav {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 750rpx;
		height: 80rpx;
		background: #ffffff;

		.left,
		.right {
			width: 269rpx;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 24rpx;
			font-family: Source Han Sans CN, Source Han Sans CN-Regular;
			font-weight: 400;
			text-align: center;
			border: 1rpx solid #29c563;
		}

		;

		.left {
			border-radius: 30rpx 0rpx 0rpx 30rpx;
		}

		;

		.right {
			border-radius: 0rpx 30rpx 30rpx 0rpx;
		}
	}

	.body {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 750rpx;
		max-height: 1000rpx;
		overflow-y: auto;

		.w {
			width: 690rpx;
		}

		;

		.question {
			position: relative;
			text-indent: 4em;
			padding: 20rpx 0;

			text {
				font-size: 32rpx;
				font-family: Source Han Sans CN, Source Han Sans CN-Regular;
				font-weight: 400;
				line-height: 37rpx;
				text-align: left;
				color: #333333;
			}

			.tixing {
				position: absolute;
				top: 20rpx;
				left: 10rpx;
				width: 74rpx;
				height: 37rpx;
				line-height: 37rpx;

				image {
					position: absolute;
					left: 0;
					top: 0;
					width: 74rpx;
					height: 37rpx;
				}

				;

				text {
					position: absolute;
					left: 0;
					top: 0;
					width: 74rpx;
					height: 37rpx;
					text-indent: 0em;
					font-size: 24rpx;
					font-family: Source Han Sans CN, Source Han Sans CN-Regular;
					font-weight: 400;
					text-align: center;
					line-height: 37rpx;
					color: #ffffff;
					z-index: 1;
				}
			}
		}

		;

		.pic {
			width: 690rpx;
			min-height: 241rpx;
			background-color: skyblue;
			margin-top: 29rpx;
		}

		;

		.answer {
			display: flex;
			flex-direction: column;
			margin-top: 30rpx;

			.son {
				display: flex;
				flex-direction: row;
				padding: 26rpx 24rpx;
				margin-bottom: 20rpx;
				background: #ffffff;
				border: 1rpx solid #c1c1c1;
				border-radius: 4rpx;

				image {
					margin-right: 24rpx;
					width: 28rpx;
					height: 28rpx;
					border-radius: 50%;
				}

				;

				text {
					max-width: 586rpx;
					font-size: 28rpx;
					line-height: 28rpx;
					font-family: Source Han Sans CN, Source Han Sans CN-Regular;
					font-weight: 400;
					text-align: left;
					color: #333333;
				}
			}
		}

		;

		.correct {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 50rpx;

			text {
				font-size: 32rpx;
				font-family: Source Han Sans CN, Source Han Sans CN-Regular;
				font-weight: 400;
				text-align: center;
				color: #666666;
			}

			.subBtn {
				margin: 0;
				width: 200rpx;
				height: 60rpx;
				background: #ffffff;
				border: 1rpx solid #707070;
				border-radius: 31rpx;
				font-size: 28rpx;
				line-height: 60rpx;
				font-family: Source Han Sans CN, Source Han Sans CN-Regular;
				font-weight: 400;
				text-align: center;
				color: #111111;
			}
		}

		.explain {
			display: flex;
			flex-direction: column;
			box-sizing: border-box;
			padding: 0 24rpx;
			background: #eff0f2;
			border-radius: 8px;

			.title {
				display: flex;
				align-items: center;
				padding: 20rpx 0;

				view {
					margin-right: 16rpx;
					width: 8rpx;
					height: 28rpx;
					background: #29c563;
					border-radius: 4rpx;
				}

				text {
					font-size: 28rpx;
					font-family: Source Han Sans CN, Source Han Sans CN-Regular;
					font-weight: 400;
					text-align: left;
					color: #333333;
				}
			}

			;

			.content {
				padding-bottom: 20rpx;
				font-size: 32rpx;
				line-height: 44rpx;
				font-family: Source Han Sans CN, Source Han Sans CN-Regular;
				font-weight: 400;
				text-align: left;
				color: #666666;
			}
		}
	}

	.tiList {
		position: fixed;
		bottom: 98rpx;
		left: 0;
		width: 750rpx;
		height: 1024rpx;
		box-sizing: border-box;
		z-index: 98;
		background-color: #fff;

		.mask {
			position: absolute;
			top: -82rpx;
			width: 750rpx;
			height: 82rpx;
			opacity: 0.5;
			background: #000000;

		}

		.content {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			padding: 30rpx 0 0 30rpx;
			max-height: 1024rpx;
			box-sizing: border-box;
			overflow-y: auto;

			.son {
				margin: 0 30rpx 30rpx 0;
				width: 88rpx;
				height: 88rpx;
				line-height: 88rpx;
				background: #ffffff;
				border: 1rpx solid #707070;
				border-radius: 50%;
				font-size: 28rpx;
				font-family: Source Han Sans CN, Source Han Sans CN-Regular;
				font-weight: 400;
				text-align: center;
				color: #666666;
			}
		}

	}

	.score {
		position: fixed;
		top: 318rpx;
		left: 55rpx;
		width: 640rpx;
		height: 698rpx;
		background: #ffffff;
		border-radius: 16rpx;
		z-index: 99;

		.mask {
			position: absolute;
			top: -190rpx;
			left: -55rpx;
			width: 750rpx;
			height: 1206rpx;
			opacity: 0.5;
			background: #000000;
		}

		.content {
			display: flex;
			flex-direction: column;
			align-items: center;
			position: absolute;
			top: 0;
			left: 0;
			width: 640rpx;
			height: 698rpx;
			background: #ffffff;
			border-radius: 16rpx;

			.title {
				display: flex;
				flex-direction: row;
				align-items: center;
				margin: 50rpx 0;

				text {
					font-size: 40rpx;
					font-family: Source Han Sans CN, Source Han Sans CN-Medium;
					font-weight: 500;
					text-align: center;
					color: #333333;
					margin: 0 26rpx;
				}

				view {
					width: 58rpx;
					height: 6rpx;
					background: #ededed;
					border-radius: 1rpx;
				}
			}

			.progressBar {
				position: relative;
				width: 200rpx;
				height: 200rpx;

				.text {
					position: absolute;
					top: 70rpx;
					left: 52rpx;
					display: flex;
					flex-direction: column;
					align-items: center;

					text {
						font-size: 24rpx;
						font-family: Source Han Sans CN, Source Han Sans CN-Medium;
						font-weight: 500;
						text-align: center;
						color: #666666;
						line-height: 36rpx;
					}
				}
			}

			.isPass {
				margin: 20rpx 0;
				font-size: 28rpx;
				font-family: Source Han Sans CN, Source Han Sans CN-Medium;
				font-weight: 500;
				text-align: center;
				color: #29c563;
			}

			.fenshu {
				margin-top: 20rpx;
				font-size: 28rpx;
				font-family: Source Han Sans CN, Source Han Sans CN-Medium;
				font-weight: 500;
				text-align: center;
				color: #666666;

				text {
					font-size: 40rpx;
					font-family: Source Han Sans CN, Source Han Sans CN-Medium;
					font-weight: 500;
					text-align: center;
					color: #f93030;
				}
			}

			.btns {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				width: 100%;
				box-sizing: border-box;
				padding: 0 27rpx;
				margin-top: 50rpx;

				button {
					width: 260rpx;
					height: 80rpx;
					line-height: 80rpx;
					font-size: 28rpx;
					font-family: Source Han Sans CN, Source Han Sans CN-Regular;
					font-weight: 400;
					text-align: center;
				}

				.continue {
					background: #ffffff;
					border: 1rpx solid #29c563;
					border-radius: 41rpx;
					color: #29c563;
				}

				.sub {
					background: linear-gradient(134deg, #54d685, #29c563 99%);
					border-radius: 40rpx;
					color: #ffffff;
				}
			}
		}
	}

	.bottom {
		display: flex;
		flex-direction: row;
		align-items: center;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 750rpx;
		height: 98rpx;
		padding: 0 24rpx;
		box-sizing: border-box;
		border-top: 2rpx solid #ededed;
		background: #ffffff;

		.son {
			display: flex;
			align-items: center;

			image {
				margin-right: 10rpx;
				width: 34rpx;
				height: 34rpx;
			}

			;

			text {
				font-size: 28rpx;
				font-family: Source Han Sans CN, Source Han Sans CN-Regular;
				font-weight: 400;
				text-align: center;
				color: #333333;
			}
		}



		.jiaojuan {
			width: 200rpx;
			height: 68rpx;
			line-height: 68rpx;
			background: linear-gradient(134deg, #54d685, #29c563 99%);
			border-radius: 34rpx;
			font-size: 28rpx;
			font-family: Source Han Sans CN, Source Han Sans CN-Regular;
			font-weight: 400;
			text-align: center;
			color: #ffffff;
		}
	}
</style>
